<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改课程')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <link th:href="@{/css/layui/layui.css}" rel="stylesheet"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-course-edit" th:object="${course}">
        <input name="id" th:field="*{id}" type="hidden">
        <h4 class="form-header h4">课程信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-3 control-label  is-required">课程名称：</label>
                    <div class="col-sm-8">
                        <input name="title" class="form-control" th:field="*{title}" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-3 control-label">专业名称</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input id="proId" name="proId" th:field="*{proId}"  type="hidden"/>
                            <input class="form-control" type="text" onclick="selectSpecializedTree()"  id="proName" th:field="*{proName}" readonly="true">
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-3 control-label  is-required">归属部门：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input name="deptId" th:field="*{deptId}" id="treeId" type="hidden">
                            <input name="deptName" th:field="*{deptName}" onclick="selectDeptTree()" id="treeName"
                                   type="text" placeholder="请选择归属部门" class="form-control" required>
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-3 control-label">封面：</label>
                    <div class="col-sm-8">
                        <input type="hidden" id="image" name="image" th:field="*{image}">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="test1">上传图片</button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="demo1" th:src="*{image}"
                                     style="width: 95px;height: 95px">
                                <p id="demoText"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">教师：</label>
                    <div class="col-sm-8">
                        <input name="userName" class="form-control" th:field="*{userName}" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">年级：</label>
                    <div class="col-sm-8">
                        <input name="grade" class="form-control" th:field="*{grade}" type="text" required>
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4">课件信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择视频</button>
                    <div class="layui-upload-list">
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th>文件名</th>
                                <th>大小</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="demoList"></tbody>
                        </table>
                    </div>
                    <button type="button" class="layui-btn" id="testListAction">上传视频</button>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">介绍：</label>
                    <div class="col-sm-8">
                        <textarea name="introduce" rows="5" class="form-control">[[*{introduce}]]</textarea>
                    </div>
                </div>
            </div>
        </div>


    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
        </button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
    var prefix = ctx + "edu/course";


    function selectSpecializedTree() {
        var options = {
            title: '专业选择',
            width: "380",
            url:  "/edu/specialized/selectSpecializedTree/" + $("#treeId").val(),
            callBack: doSubmitSpe
        };
        $.modal.openOptions(options);
    }

    function doSubmitSpe(index, layero){
        var body = layer.getChildFrame('body', index);
        $("#proId").val(body.find('#treeId').val());
        $("#proName").val(body.find('#treeName').val());
        console.log(body.find('#treeId').val(),body.find('#treeName').val())
        layer.close(index);
    }

    var course = [[${course}]];
    var upAttList = course.upAttList;
    var attachmentList = [];
    upAttList.forEach(function (value, index) {
        var obj = {};
        obj.attachment = value.attOgfName;
        obj.url = value.storagePath;
        obj.size = value.attSize;
        obj.id = value.id;
        obj.delFlag = 0;
        attachmentList.push(obj);
    })

    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;


        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: ctx + 'common/upload' //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                if (res.code > 0) {
                    return layer.msg('上传失败');
                } else {
                    $("#image").val(res.url);
                }

            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        //多文件列表示例
        var demoListView = $('#demoList')
            , uploadListIns = upload.render({
            elem: '#testList'
            , url: ctx + 'common/upload' //改成您自己的上传接口
            , accept: 'file'
            , multiple: true
            , auto: false
            , bindAction: '#testListAction'
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    // //删除
                    tr.find('.demo-delete').on('click', function () {
                        attachmentList.forEach(function (value, index1) {
                            if (value.id == index) {
                                value.delFlag = 1;
                            }
                        })
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });
                    var d = {"attachment": file.name, "size": (file.size / 1024).toFixed(1), "id": index, "delFlag": 0};
                    attachmentList.push(d);
                    demoListView.append(tr);
                });
            }
            , done: function (res, index, upload) {
                if (res.code === 0) { //上传成功
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    attachmentList.forEach(function (value, index1) {
                        if (value.delFlag == 0 && value.id == index) {
                            value.url = res.url;
                        }
                    })
                    console.log(attachmentList);
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });

        attachmentList.forEach(function (att, i) {
            var tr = $(['<tr id="upload-' + att.id + '">'
                , '<td>' + att.attachment + '</td>'
                , '<td>' + att.size + 'kb</td>'
                , '<td></td>'
                , '<td>'
                , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete" id="'+ att.id + '"  onclick="del(this)">删除</button>'
                , '</td>'
                , '</tr>'].join(''));
            demoListView.append(tr);
        })

        $('button').on('click', function (e) {
            e.preventDefault();
        });
    });

    function del(e) {

       var id = $(e).attr('id');
        $(e).parents('tr').remove();
        attachmentList.forEach(function (value) {
            if (value.id == id) {
                value.delFlag = 1;
            }
        })
    }

    $("#form-course-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            var data = $("#form-course-edit").serializeArray();
            var attach = [];
            this.attachmentList.forEach(function (value, index) {

                if (value.delFlag == 0) {
                    var obj = {};
                    obj.attOgfName = value.attachment;
                    obj.storagePath = value.url;
                    obj.attSize = value.size;

                    var fileName = value.attachment;
                    var first = fileName.lastIndexOf(".");//取到文件名开始到最后一个点的长度
                    var namelength = fileName.length;//取到文件名长度
                    var filesuffix = fileName.substring(first + 1, namelength);//截取获得后缀名
                    obj.attSuffix = filesuffix;
                    attach.push(obj);
                }
            })
            if (attach.length == 0) {
                $.modal.msgError('没有上传视频');
                return
            }
            var strify = JSON.stringify(attach);
            data.push({"name": "upAttListJosn", "value": strify});
            $.operate.save(prefix + "/edit", data);
        }
    }

    /* 用户管理-新增-选择部门树 */
    function selectDeptTree() {
        var treeId = $("#treeId").val();
        var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
        var url = ctx + "system/dept/selectDeptTree/" + deptId;
        var options = {
            title: '选择部门',
            width: "380",
            url: url,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        var body = layer.getChildFrame('body', index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        layer.close(index);
    }
</script>
</body>
</html>
